<template>
  <div>mymovie</div>
  <div>
    <router-link to="/mymovie/1/电影1">电影1</router-link>
    <router-link to="/mymovie/2/电影2">电影2</router-link>
    <router-link :to="{ name: 'movieDetail', params: { id: 3, name: '电影3' } }">电影3</router-link>
  </div>
  <div>
    <a href="#" @click.prevent="gotoMovie(10)">（push）快速导航到电影10</a>
  </div>
  <div>
    <router-view> </router-view>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const gotoMovie = (movieId: number) => {
  router.push({ name: 'movieDetail', params: { id: movieId, name: '电影10' } })
}
</script>

<style scoped></style>
